<template>
  <div>
    <el-row
      align="middle"
      justify="start"
      style="margin-bottom: 10px"
    >
      <el-col :span="5">
        <span>上报时间：</span>
        <el-date-picker
          v-model="reportTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="5">
        <span>处理时间：</span>
        <el-date-picker
          v-model="processTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="5">
        <span>隐患类型：</span>
        <el-select
          v-model="hiddenDangerCategory"
          placeholder="请选择"
        >
          <el-option
            v-for="item in hiddenDangerCategoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button
          type="primary"
          @click="searchHandler"
          >搜索</el-button
        >
        <el-button
          type="info"
          @click="resetHandler"
          >重置</el-button
        >
      </el-col>
      <el-col :span="5"></el-col>
    </el-row>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          prop="reportPathList"
          label="上报图片"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.reportPathList.length == 0">暂无上报图片</div>
            <img
              v-else
              style="width: 100px; height: 100px"
              :src="scope.row.reportPathList[0].path"
              @click="imgDetail(scope.row.reportPathList)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="dangerType"
          label="隐患类别"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="location"
          label="所在区域"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="dangerDesc"
          label="隐患描述"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="mileage"
          label="里程位置"
          align="center"
        >
          <template slot-scope="scope">
            DK{{ scope.row.mileageKm }}+{{ scope.row.mileageM }}
          </template>
        </el-table-column>
        <el-table-column
          prop="reportBy"
          label="上报人"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="reportTime"
          label="上报时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="dealstatus"
          label="处理状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              type="danger"
              v-if="scope.row.dealStatus == '-1'"
              >{{ scope.row.dealStatusName }}</el-tag
            >
            <el-tag
              type="info"
              v-else-if="scope.row.dealStatus == '_0'"
              >{{ scope.row.dealStatusName }}</el-tag
            >
            <el-tag v-else-if="scope.row.dealStatus == '1'">{{
              scope.row.dealStatusName
            }}</el-tag>
            <el-tag
              type="success"
              v-else
              >{{ scope.row.dealStatusName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="dealBy"
          label="处理人"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="dealPathList"
          label="处理图片"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.dealPathList.length == 0">暂无处理图片</div>
            <img
              v-else
              style="width: 100px; height: 100px"
              :src="scope.row.dealPathList[0].path"
              @click="imgDetail(scope.row.dealPathList)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="dealDesc"
          label="处理描述"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="dealTime"
          label="处理时间"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="isShow"
      width="30%"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <img
        v-for="item in imgList"
        :key="item.id"
        style="width: 200px; height: 200px; border: 1px solid gray; margin: 5px"
        :src="item.path"
      />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="isShow = false">取 消</el-button>
        <el-button
          type="primary"
          @click="isShow = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { pagelineInspection } from '/src/http/productSchedule/lineInspect.js'
import { getImage } from '/src/http/productSchedule/userMg.js'
import { blobToBase64 } from '/src/utils/autoClick.js'
export default {
  name: 'lineInspect',
  data() {
    return {
      isShow: false,
      imgList: null,
      reportTime: '',
      processTime: '',
      hiddenDangerCategoryOptions: [
        {
          value: '施工机械隐患',
          label: '施工机械隐患',
        },
        {
          value: '高空隐患',
          label: '高空隐患',
        },
        {
          value: '消防隐患',
          label: '消防隐患',
        },
        {
          value: '电力隐患',
          label: '电力隐患',
        },
        {
          value: '其他隐患',
          label: '其他隐患',
        },
      ],
      hiddenDangerCategory: '',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
    }
  },

  mounted() {
    this.pagelineInspectionApi()
  },

  methods: {
    searchHandler() {
      if (
        (this.reportTime === '') &
        (this.processTime === '') &
        (this.hiddenDangerType === '')
      ) {
        this.$message({
          message: '请输入查询条件',
          type: 'warning',
        })
      }
      this.renderData = this.tableData.filter((el) => {
        return el.hiddenDangerCategory === this.hiddenDangerCategory
      })
      this.total = this.renderData.length
    },

    resetHandler() {
      this.renderPage()
    },
    renderPage() {
      this.renderData = this.tableData
      this.total = this.renderData.length
      this.reportTime = ''
      this.processTime = ''
      this.hiddenDangerCategory = ''
    },

    handleSizeChange(v) {
      console.log('v::: ', v)
    },

    handleCurrentChange(v) {
      this.currentPage = v
    },

    imgDetail(imgList) {
      this.isShow = true
      this.imgList = imgList
    },

    pagelineInspectionApi(params) {
      pagelineInspection(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
          this.renderData.forEach((el) => {
            if (el.reportPathList.length != 0) {
              el.reportPathList.forEach((item) => {
                if (item.path != null) {
                  console.log('{ path: item.path }::: ', {})
                  getImage({ path: item.path }).then((resImg) => {
                    blobToBase64(resImg).then((resBase64) => {
                      item.path = resBase64
                    })
                  })
                }

                if (el.dealPathList.length != 0) {
                  el.dealPathList.forEach((item) => {
                    if (item.path != null) {
                      getImage({ path: item.path }).then((resImg) => {
                        blobToBase64(resImg).then((resBase64) => {
                          item.path = resBase64
                        })
                      })
                    }
                  })
                }
              })
            }
          })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.el-date-editor {
  margin: 0 10px;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}
</style>
